<template>
  <div class="paging-device">
    <el-card class="box-card">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20, 25, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      default: 1,
      type: Number,
    },
    pagesize: {
      default: 10,
      type: Number,
    },
    total: {
      default: 0,
      type: Number,
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("size-change", {
        _pagesize: val,
        _currentPage: 1,
      });
    },
    handleCurrentChange(val) {
      this.$emit("current-change", {
        _currentPage: val,
      });
    },
  },
};
</script>

<style></style>
